<template>
	<view >
		<!-- 订单列表 -->
		<view v-if='orders && orders.length > 0' class="order-list">
			<view v-for="(item, index) in orders" :key="item.id" class="order-card">
				<view class="order-header">
					<text class="order-no">订单号：{{item.no}}</text>
					<text class="order-status" :style="{color: getStatusColor(item.status)}">
						{{getStatusText(item.status)}}
					</text>
				</view>

				<view class="goods-item" v-for="goods in item.items" :key="goods.id">
					<image class="goods-img" :src="goods.__metadata.specification.__metadata.product.__metadata.cover" mode="aspectFill"></image>
					<view class="goods-info">
						<text class="goods-name">{{goods.__metadata.specification.__metadata.product.__metadata.name}}</text>
						<text class="goods-spec">{{goods.__metadata.specification.__metadata.name}}  x  {{goods.__metadata.quantity}}</text>
						<text class="goods-price">¥{{goods.__metadata.price}}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<view v-else style='margin-top:20vh'>
			<u-empty mode="order">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import wechatPay from '@/utils/wechat-pay.js'
	export default {
		data() {
			return {
				currentStatus: 5, // 0-全部 1-待支付 2-待发货 3-待收货 4-已完成
				// statusTabs: [{
				// 		label: '全部',
				// 		value: 0
				// 	},
				// 	{
				// 		label: '待支付',
				// 		value: 1
				// 	},
				// 	{
				// 		label: '待发货',
				// 		value: 2
				// 	},
				// 	{
				// 		label: '待收货',
				// 		value: 3
				// 	},
				// 	{
				// 		label: '已完成',
				// 		value: 4
				// 	},
				// 	{
				// 		label: '推荐订单',
				// 		value: 5
				// 	}
				// ],
				limit: 5,
				page: 1,
				status: 'loadmore',
				orders: [],
				myId: 0
			}
		},
		onLoad() {
			this.request.get(`api/user`).then((res) => {
				this.myId = res.data.id
				this.getOrders()
			})
		},
		onReachBottom() {
			if (this.status == 'loadmore') {
				this.page++
				this.getOrders()
			}
		},
		computed: {
			filteredOrders() {
				if (this.currentStatus === 0) return this.orders
				return this.orders.filter(item => item.status === this.currentStatus)
			}
		},
		methods: {
			toUrl(page) {
				uni.navigateTo({
					url: page
				})
			},
			afterSales(orderId){
				uni.navigateTo({
					url: `/pages/mine/after-sales?id=${orderId}`
				})
			},
			changeStatus(status) {
				this.currentStatus = status
				this.status = 'loadmore'
				this.page = 1
				this.orders = []
				this.getOrders()
			},
			getStatusText(status) {
				const map = {
					1: '待支付',
					2: '待发货',
					3: '待收货',
					4: '已完成',
					'-1': '已取消'
				}
				return map[status] || '未知状态'
			},
			getOrders() {
				uni.showLoading()
				let filter = `entity.getUser().getId() != ${this.myId} && entity.getStatus() >= 2`
				this.request.get(`api/orders`, {
					'@filter': filter,
					'@order': "entity.id|DESC",
					'@expands': "['entity.items.specification.product']",
					limit: this.limit,
					page: this.page
				}).then((res) => {
					if (res.data && res.data.length < this.limit) {
						this.status = 'nomore'
					}
					for (let i of res.data) {
						this.orders.push(i)
					}
					uni.hideLoading()
				})
			},
			getStatusColor(status) {
				const colors = {
					1: '#FF5500',
					2: '#FFAA00',
					3: '#00AAFF',
					4: '#00AA00'
				}
				return colors[status] || '#999999'
			},
			payOrder(index) {
				const tmplIds = [
					'uTZLnU0Ltow5L0KwpPfQ5t1YHpnduJKlMOAyg08ntw8'
				];
				uni.requestSubscribeMessage({
					tmplIds: tmplIds,
					success: res => {
						wechatPay(this.orders[index].invoice.id).then((res) => {
							uni.hideLoading()
							uni.showModal({
								title: '',
								content: '支付成功！',
								showCancel: false,
								success: () => {
									this.orders[index].status = 2
								}
							})
						}).catch((err) => {
							uni.hideLoading()
							uni.showModal({
								title: '',
								content: '支付失败，请重试',
								showCancel: false,
								success: () => {
								}
							})
						})
					}
				})
				
			},
			confirmReceipt(id) {
				uni.showToast({
					title: `确认收货 ${id}`,
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.order-page {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.status-tabs {
		white-space: nowrap;
		background-color: #FFFFFF;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.tab-item {
		display: inline-block;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #666666;
	}

	.tab-item.active {
		color: #FF5500;
		font-weight: bold;
	}

	.order-list {
		padding: 20rpx;
	}

	.order-card {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.order-no {
		font-size: 26rpx;
		color: #999999;
	}

	.order-status {
		font-size: 26rpx;
	}

	.goods-item {
		display: flex;
		padding: 20rpx;
		border-bottom: 1rpx solid #F5F5F5;
	}

	.goods-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
	}

	.goods-info {
		flex: 1;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.goods-spec {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.goods-price {
		font-size: 28rpx;
		color: #FF5500;
		margin-top: 10rpx;
	}

	.goods-count {
		width: 80rpx;
		text-align: right;
		font-size: 26rpx;
		color: #666666;
		align-self: flex-end;
	}

	.order-footer {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.total-amount {
		font-size: 28rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.action-btns {
		display: flex;
	}

	.btn {
		height: 56rpx;
		line-height: 56rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
		border-radius: 28rpx;
	}

	.btn.primary {
		background-color: #67C23A;
		color: #FFFFFF;
		border: none;
	}

	.btn.default {
		background-color: #FFFFFF;
		color: #FF5500;
		border: 1rpx solid #FF5500;
	}
	
	.btn.warning {
		background-color: #FF5500;
		color: #FFFFFF;
		border: 1rpx solid #FFFFFF;
	}

	.btn.plain {
		background-color: #FFFFFF;
		color: #666666;
		border: 1rpx solid #CCCCCC;
	}
</style>